<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>环形柱状图节点</title>
    <style>
      #mountNode {
        background: #001528;
      }
    </style>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      /**
       * 该案例演示如何自定义一个类似南丁格尔玫瑰一样的节点
       * by 镜曦
       */

      /**
       * 注册一个类似南丁格尔玫瑰一样的节点
       */
      G6.registerNode('circleBar', {
        draw(cfg, group) {
          const size = cfg.size || [40, 40]; // 如果没有 size 时的默认大小
          const width = size[0];
          const height = size[1];
          /*
          G：
          Fan
          x: 扇形圆心的 x 坐标
          y: 扇形圆心的 y 坐标
          rs: 内圈半径
          re: 外圈半径
          startAngle: 起点弧度
          endAngle: 终点弧度
          clockwise: 为true时顺时针渲染，为false时逆时针渲染
        */
          const baseR = 30;
          let nowAngle = 0;
          const everyIncAngle = (2 * Math.PI * (360 / 5 / 5)) / 360;
          cfg.details.forEach(cat => {
            cat.values.forEach(item => {
              const re = item + baseR;
              const fan = group.addShape('fan', {
                attrs: {
                  x: 0,
                  y: 0,
                  rs: baseR,
                  re: item + baseR,
                  startAngle: nowAngle,
                  endAngle: (nowAngle += everyIncAngle),
                  clockwise: false,
                  stroke: 'darkgray',
                  fill: cat.color,
                },
              });
              // 加上交互动画
              fan.on('mouseenter', function(evt) {
                fan.animate(
                  {
                    re: re + 8,
                  },
                  {
                    repeat: false,
                    duration: 300,
                  },
                );
              });
              fan.on('mouseleave', function(evt) {
                fan.animate(
                  {
                    re: re,
                  },
                  {
                    repeat: false,
                    duration: 300,
                  },
                );
              });

              // 设置class
              fan.set('className', 'littleCircle');
            });
          });
          group.addShape('circle', {
            // attrs: style
            attrs: {
              x: 0, // 居中
              y: 0,
              r: baseR,
              fill: cfg.centerColor,
              stroke: 'darkgray',
            },
          });
          if (cfg.label) {
            group.addShape('text', {
              // attrs: style
              attrs: {
                x: 0, // 居中
                y: 0,
                textAlign: 'center',
                textBaseline: 'middle',
                text: cfg.label,
                fill: 'white',
                fontStyle: 'bold',
              },
            });
          }
          return group;
        },
      });

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 500,
        height: 500,
      });

      const data = {
        nodes: [
          {
            id: 'nodeA',
            x: 150,
            y: 150,
            label: 'Bar',
            shape: 'circleBar',
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
            ],
            details: [
              { cat: 'pv', values: [20, 30, 40, 30, 30], color: '#25cbfd' },
              { cat: 'dal', values: [40, 30, 20, 30, 50], color: '#feff7b' },
              { cat: 'uv', values: [40, 30, 30, 40, 40], color: '#feab3a' },
              { cat: 'sal', values: [20, 30, 50, 20, 20], color: '#fe5766' },
              { cat: 'cal', values: [10, 10, 20, 20, 20], color: '#16c176' },
            ],
            centerColor: '#0066FF',
          },
        ],
      };

      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
